import Loading from '@/components/PageLoading/index'
import { Modal } from 'antd-mobile-v2'
import { useObserver } from 'mobx-react'
import { useState } from 'react'
import { history, Prompt } from 'umi'
import Hook from './hook'
import styles from './index.module.less'
import ProgressBar from './ProgressBar'
import SingleChoice from './SingleChoice'

export default function (props) {
    const { id, preview = 0 } = history.location.query
    const hook = new Hook(id, preview)

    // Modal可视状态，用于控制弹窗只显示一次
    const [modalVisible, setModalVisible] = useState(false)

    return useObserver(() => {
        return (
            <>
                {hook.currentQuestion ? (
                    <div className={[styles.container, hook.isDesc ? styles.is_desc : styles.no_desc].join(' ')}>
                        <Prompt
                            message={location => {
                                if (hook.exitFlag || location.pathname === '/job/ability') {
                                    return true
                                }
                                if (modalVisible) {
                                    return false
                                }
                                setModalVisible(true)
                                Modal.alert('确定要退出测评？', '退出后测评记录将不会保存哦', [
                                    {
                                        text: '退出',
                                        onPress: () => {
                                            history.goBack()
                                            hook.setExitFlag(true)
                                            setModalVisible(false)
                                        },
                                    },
                                    {
                                        text: '继续',
                                        onPress: () => {
                                            setModalVisible(false)
                                        },
                                    },
                                ])
                                return false
                            }}
                        />

                        <div id="container_top" />

                        {/* 答题进度 */}
                        {hook.isDesc ? null : (
                            <div className={styles.progress_box}>
                                {hook.isSkipQuestion ? null : (
                                    <>
                                        {hook.questionCount ? (
                                            <div className={styles.progress_value} onClick={hook.calcPrecent}>
                                                <span className={styles.answer_count}>{hook.currentNo}</span>/{hook.questionCount}
                                            </div>
                                        ) : null}
                                    </>
                                )}

                                <ProgressBar percent={hook.percent} backBg="#FFFFFF" />
                            </div>
                        )}

                        {/* 选项 */}
                        <div className={styles.question_box}>
                            <SingleChoice question={hook.currentQuestion} anwser={hook.answerList[hook.answerList.length - 1]} onCheck={hook.checkAnwser} />
                        </div>

                        {/* 操作 */}
                        <div className={styles.operate_box}>
                            {/* 非段落说明 且 回答数大于0 且 当前回答题目不为第一题 */}
                            {!hook.isDesc && hook.answerList.length > 0 && hook.answerList[0]?.id !== hook.currentQuestion?.id && (
                                <div className={styles.button_prev} onClick={hook.backToPrevQuestion}>
                                    上一题
                                </div>
                            )}
                            {/* TODO */}
                            {/* 非段落说明 且 非最后一题 */}
                            {!hook.isDesc && hook.questionCount !== hook.answerList.length && (
                                <div
                                    className={styles.button_prev}
                                    onClick={hook.handleNextQuestion}
                                    style={{
                                        color: hook.answerList[hook.answerList.length - 1]?.id === hook.questionList[hook.currentQuesIndex]?.id ? '' : 'rgba(23, 26, 29, 0.25)',
                                    }}
                                >
                                    {!hook.isSkipQuestion &&
                                    hook.questionCount - 1 === hook.answerList.length &&
                                    hook.answerList[hook.answerList.length - 1]?.id !== hook.questionList[hook.currentQuesIndex]?.id
                                        ? '提交'
                                        : '下一题'}
                                </div>
                            )}
                            {hook.questionCount > 0 && hook.questionCount === hook.answerList.length && (
                                <div
                                    className={styles.button_submit}
                                    onClick={() => {
                                        hook.submitExam(hook.answerList)
                                    }}
                                >
                                    提交
                                </div>
                            )}
                            {hook.isDesc && (
                                <div className={styles.button_know} onClick={hook.iKnow} style={{ width: '90%' }}>
                                    我知道了
                                </div>
                            )}
                        </div>
                    </div>
                ) : (
                    <Loading />
                )}
            </>
        )
    })
}
